<template>
  <scroll-view class="scroll-view" scroll-y enable-back-to-top refresher-enabled :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh">
    <!-- 轮播图 -->
    <UFastSwiper :list="bannerList" />
    <!-- 理考考试面板 -->
    <TheoryExamNav :base-type="baseType" />
    <view class="page-gap"></view>
    <!-- 真实考试模拟 -->
    <view class="real-exam-mock">
      <view class="real-exam-mock-header">
        <view class="title">{{ useBaseTypeName(baseType) }}真实考场模拟</view>
        <view class="desc">心里更有底</view>
      </view>
      <view class="real-exam-mock-content">
        <view class="left">
          <view class="left-item">
            <text class="left-item-index">1</text>
            <text class="left-item-content">提前了解考试界面操作</text>
          </view>
          <view class="left-item">
            <text class="left-item-index">2</text>
            <text class="left-item-content">高度还原考场出题规则</text>
          </view>
          <navigator :url="`/pagesExam/mockRealExam/mockRealExam?baseType=${baseType}`" hover-class="none">
            <view class="left-button">
              马上去试试
            </view>
          </navigator>

        </view>
        <view class="right">
          <image class="real-exam-mock-img" :src="examTheoryExamImages.realExamMock" mode="widthFix" />
        </view>
      </view>
    </view>
    <view class="page-gap"></view>
    <!-- 交管12123 -->
    <Jg12123 />
    <view class="page-gap"></view>
    <!-- 好有分享 -->
    <UFastShare />
  </scroll-view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useBaseTypeName } from '@/composables/LearnBase'
  import { useExamTheoryExamImages } from '@/static/images'
  /* 考试面板 */
  import TheoryExamNav from './TheoryExamNav.vue'
  import Jg12123 from './Jg12123.vue'

  const examTheoryExamImages = useExamTheoryExamImages()

  // 自定义属性
  const prosp = defineProps({
    /* 题库类型 */
    baseType: {
      type: String,
      required: true,
    },
    bannerList: {
      type: Array<BannerItem>,
      required: true,
    }
  })

  // 当前下拉刷新状态
  const isTriggered = ref(false)
  // 自定义下拉刷新被触发
  const onRefresherrefresh = async () => {
    // 开始动画
    isTriggered.value = true
    setTimeout(() => {
      // 关闭动画
      isTriggered.value = false
    }, 1000);

  }
</script>

<style lang="scss" scoped>
  .scroll-view {
    display: flex;
    flex-direction: column;
  }

  //真实考试模拟
  .real-exam-mock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60rpx 20rpx;

    .real-exam-mock-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 36rpx;
        color: #1a191f;
        font-weight: bold;
      }

      .desc {
        font-size: 20rpx;
        color: #5a5a5a;
      }

    }

    .real-exam-mock-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40rpx;
      padding: 0 20rpx;

      .left {
        display: flex;
        flex-direction: column;
        margin-top: 40rpx;

        .left-item {
          display: flex;
          margin-bottom: 30rpx;

          .left-item-index {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
            font-size: 28rpx;
            color: #ffffff;
            background-color: #27c463;
            opacity: 0.7;
            border-radius: 50%;
          }

          .left-item-content {
            font-size: 28rpx;
            color: #080635;
            font-weight: bold;
          }
        }

        .left-button {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 20rpx;
          width: 202rpx;
          height: 60rpx;
          font-size: 26rpx;
          color: #ffffff;
          font-weight: bold;
          background-color: #27c463;
          box-shadow: 2rpx 1rpx 24rpx 0rpx rgba(4, 160, 64, 0.49);
          border-radius: 30rpx;
        }
      }

      .right {
        .real-exam-mock-img {
          width: 288rpx;
        }
      }
    }
  }

  .page-gap {
    height: 20rpx;
    background-color: #f7f7f7;


  }


</style>
